<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>03-vue跑马灯</title>
    <script type="text/javascript" src="static/vue.min.js"></script>
</head>
<body>
<div id="click">
    <input type="button" v-on:click="action()" value="开始"/>
    <input type="button" v-on:click="stop()" value="停止"/>
    {{message}}
</div>
<script>
    new Vue({
        el: "#click",
        data: {
            message: "日出东方,唯我不败",
            intervalId: null
        },
        methods: {
            action: function () {
                if (this.intervalId != null) {
                    return;
                }
                //定时任务
                this.intervalId = setInterval(() => {
                    var start = this.message.substring(0, 1);
                    var end = this.message.substring(1);
                    this.message = end + start;
                }, 1000);
            },
            stop: function () {
                //关闭定时器
                clearInterval(this.intervalId);
                this.intervalId = null;
            }
        }
    });
</script>
<div id="again">
    <input type="button" value="卧槽" @click="action()">
    <input type="button" value="停" @click="stop()">
    {{message}}
</div>
<script>
    new Vue({
        el: "#again",
        data: {
            message: "冷漠,别把寂寞当缘分",
            intervalId: null
        },
        methods: {
            action: function () {
                // 取消叠加，维持匀速
                if (this.intervalId != null) {
                    return;
                }
                //设置定时
                this.intervalId = setInterval(() => {
                    var start = this.message.substring(0, 1);
                    var end = this.message.substring(1);
                    // 将开始截取的拼接在后面
                    this.message = end + start;
                }, 100)

            },
            stop: function () {
                // 关闭定时
                clearInterval(this.intervalId);
                // 将intervalId置为空
                this.intervalId = null;
            }
        }
    });
</script>
</body>
</html>